/*
  学习目标：使用useEffect请求数据
  前置:
    0.1 安装axios
    0.2 准备request.js请求模块
  步骤：
    
    
*/
import React, { useEffect } from "react";
import { getChannelsAPI } from "./api/channel";
import { useState } from "react";

export default function App() {
  // 3. 声明状态, 保存数据
  const [list, setList] = useState([]);

  // 💥useEffect要求接收的函数是同步的 ,不能是异步的
  async function loadData(params) {
    const res = await getChannelsAPI();
    setList(res.data.channels);
  }

  useEffect(() => {
    // 2. 挂载后, 发请求
    loadData();
  }, []);
  return (
    <ul>
      {/*  4. 列表渲染数据 */}
      {list.map((item) => {
        return <li key={item.id}>{item.name}</li>;
      })}
    </ul>
  );
}
